<template>
  <view class="video-container">
    <image class="filter-bg" :src="videoObj.img"></image>
    <view class="play-tool">
      <view :class="['iconfont',{iconshengyin:!muted,iconjingyin: muted}]" @click="handleVideoMuted"></view>
      <view class="iconfont iconzhuanfa">
        <button open-type="share"></button>
      </view>
    </view>
    <view class="video-play">
      <video :src="videoObj.video" objectFit='fill' :muted="muted"></video>
    </view>
    <view class="download">
      <view class="download-btn" @click="handleDownLoadVideo">下载高清</view>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.videoObj = getApp().globalData.video
  },
  data() {
    return {
      videoObj: {},
      muted: false // 是否为静音
    }
  },
  methods:{
    handleVideoMuted() {
      this.muted = !this.muted;
    },
    async handleDownLoadVideo() {
      await uni.showLoading({title: '下载中', icon:'none'})
      const {tempFilePath} = (await uni.downloadFile({url: this.videoObj.video}))[1]
      await uni.saveVideoToPhotosAlbum({
        filePath: tempFilePath
      })

      await uni.hideLoading()
      uni.showToast({title: '下载成功', icon:'success'})
    }
  }
}
</script>

<style lang='scss' scoped>
.video-container {
  .filter-bg {
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    filter: blur(20rpx);
  }
  .play-tool {
    display: flex;
    justify-content: flex-end;
    height: 80rpx;
    .iconfont {
      width: 80rpx;
      border-radius: 50%;
      color: #fff;
      background-color: rgba(0,0,0,.2);
      font-size: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
    }
    .iconzhuanfa {
      position: relative;
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
   
  }

  .video-play {
    display: flex;
    justify-content: center;
    video {
      width: 360rpx;
      height: 600rpx;
    }
  }

  .download {
    display: flex;
      justify-content: center;
    .download-btn {
      width: 400rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #fff;
      border-radius: 40rpx;
      font-size: 50rpx;
      color: #fff;
      background-color: rgba(0,0,0,.3);
      margin-top: 40rpx;
    }
  }
}
</style>